<template>
  <div
    class="duyi-pager"
    :class="{
      [`duyi-pager--${type}`]: type,
      [`duyi-pager--${size}`]: size,
    }"
  >
    <!-- 首页 -->
    <a
      :class="{ disabled: currentPage === 1 }"
      :disabled="currentPage === 1 ? true : false"
      @click="pageChangeHandle(1)"
    >
      首页
    </a>
    <!-- 上一页 -->
    <a
      :class="{ disabled: currentPage === 1 }"
      :disabled="currentPage === 1"
      @click="pageChangeHandle(currentPage <= 1 ? 1 : currentPage - 1)"
    >
      <Duyi-Icon icon="angles-left"></Duyi-Icon>
    </a>
    <!-- 中间页 -->
    <!-- 开头 -->
    <a
      v-if="total > pageCount && currentPage > pageCountHalfFloor"
      @click="pageChangeHandle(1)"
      >1</a
    >
    <a v-if="total > pageCount && currentPage > pageCountHalfFloor">
      <Duyi-Icon icon="ellipsis" size="sm"></Duyi-Icon>
    </a>
    <!-- 通过计算属性渲染 -->
    <a
      v-for="page in pager"
      :key="page"
      :class="{ active: page === currentPage }"
      @click="pageChangeHandle(page)"
    >
      {{ page }}
    </a>
    <!-- 结尾 -->
    <a v-if="total > pageCount && currentPage < total - pageCountHalfFloor">
      <Duyi-Icon icon="ellipsis" size="sm"></Duyi-Icon>
    </a>
    <a
      v-if="total > pageCount && currentPage < total - pageCountHalfFloor"
      @click.prevent="pageChangeHandle(total)"
      >{{ total }}</a
    >
    <!-- 下一页 -->
    <a
      :class="{ disabled: currentPage === total }"
      :disabled="currentPage === total"
      @click="pageChangeHandle(currentPage >= total ? total : currentPage + 1)"
    >
      <Duyi-Icon icon="angles-right"></Duyi-Icon>
    </a>
    <!-- 尾页 -->
    <a
      :class="{ disabled: currentPage === total }"
      :disabled="currentPage === total"
      @click="pageChangeHandle(total)"
    >
      尾页
    </a>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import propsObj from './props.js'
defineOptions({
  name: 'DuyiPager',
})
const props = defineProps(propsObj)
// 页码最大数的一半
const pageCountHalfFloor = computed(() => Math.floor(props.pageCount / 2))
// const pageCountHalfCeil = computed(() => Math.ceil(props.pageCount / 2))
// 接下来需要对页面进行相关计算
const pager = computed(() => {
  // 该数组用于存放要渲染的页码
  const renderPage = []
  // 可以全部渲染的情况
  if (props.total <= props.pageCount) {
    // 总页数小于等于页码最大数
    for (let i = 1; i <= props.total; i++) {
      renderPage.push(i)
    }
  } else {
    // 进入 else 说明总页码数是大于可渲染页码数，无法全部渲染，只能渲染一部分
    if (props.currentPage <= pageCountHalfFloor.value) {
      // 当前页比较靠前：[1] 2 3 4 5 ... 20
      for (let i = 1; i <= props.pageCount - 2; i++) {
        renderPage.push(i)
      }
    } else if (
      props.currentPage > pageCountHalfFloor.value &&
      props.currentPage < props.total - pageCountHalfFloor.value
    ) {
      // 当前页比较靠中间：1 ... 5 6 [7] 8 9 ... 20
      for (
        let i = props.currentPage - pageCountHalfFloor.value + 2;
        i <= props.currentPage + pageCountHalfFloor.value - 3;
        i++
      ) {
        renderPage.push(i)
      }
    } else {
      // 当前页比较靠后：1 ... 16 17 18 19 [20]
      for (let i = props.total - props.pageCount + 3; i <= props.total; i++) {
        renderPage.push(i)
      }
    }
  }
  return renderPage
})

const emit = defineEmits(['current-change'])

function pageChangeHandle(newPage) {
  // 如果是当前页，不进行操作
  if (newPage === props.currentPage) return
  // 小于1
  if (newPage < 1) newPage = 1
  // 大于total
  if (newPage > props.total) newPage = props.total
  emit('current-change', newPage)
}
</script>

<style lang="scss" scoped></style>
